<template>
  <div class="content">
    <div class="gov-sub1">
      <div>
        <div class="gov-box">
          <div class="gov-data-card">
            <p>
              <span>纳入监管机关总数：</span>
              <span class="gov-num" v-for="item in (monitor.unitCount.unitCount+'')||'98'" :key="item.index">{{item}}</span>
              <span class="gov-unit">家</span>
            </p>
          </div>  
          <div class="gov-data-card">
            <p>
              <span>当前负荷总量：</span>
              <span class="gov-num" v-for="item in (Math.round(monitor.currentLoad.load)+'')||'2235'" :key="item.index">{{item}}</span>
              <span class="gov-unit">kW</span>
              <span><img :src="selectImg(monitor.currentLoad.rate)">{{monitor.currentLoad.rate}}（相对于上一时段）</span>
            </p>
          </div>
          <div class="gov-data-card">
            <p>
              <span>昨日用电量：</span>
              <span class="gov-num" v-for="item in (Math.round(monitor.elecConsumYesterday.consum)+'')||'2235'" :key="item.index">{{item}}</span> 
              <span class="gov-unit">kW</span>
              <span><img :src="selectImg(monitor.elecConsumYesterday.rate)" >{{monitor.elecConsumYesterday.rate}}（相对于上一时段）</span>
            </p>
          </div>
          <div class="gov-data-card">
            <p>
              <span>昨日用水总量：</span>
              <span class="gov-num" v-for="item in (Math.round(monitor.waterConsumYesterday.flow)+'')||'2235'" :key="item.index">{{item}}</span>
              <span class="gov-unit">吨 </span>
              <span><img :src="selectImg(monitor.waterConsumYesterday.rate)" >{{monitor.waterConsumYesterday.rate}}（相对于上一时段）</span>
            </p>
          </div>
        </div>
        <div class="gov-box">
          <div class="gov-title">
            <p>全市公共机构用电负荷分布<i class="gl"></i><i class="gl"></i></p>
          </div>
          <chart :options="chart1" :theme="chartTheme" auto-resize></chart> 
        </div>
        <div class="gov-box">
          <div class="gov-eq">
            <div class="gov-temp">
              <div>
                <p>平均室内温度</p>
                <p>{{roomInfo.temperature}}℃</p>
              </div>
              <div>
                <p>平均设定温度</p>
                <p>{{roomInfo.settemperature}}℃</p>
              </div>
            </div>
            
            <div class="gov-eq-data">
              <h3>设备开启情况</h3>
              <div class="gov-eq-list">
                <div>
                  <img src="~@/assets/ac.png" alt="">
                  <p>{{roomInfo.allACOn}}</p>
                </div>
                <div>
                  <img src="~@/assets/light.png" alt="">
                  <p>{{roomInfo.allLightOn}}</p>
                </div>
                <div>
                  <img src="~@/assets/socket.png" alt="">
                  <p>{{roomInfo.allDrinkOn}}</p>
                </div>
                <div>
                  <img src="~@/assets/fan.png" alt="">
                  <p>{{roomInfo.allPDOn}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="gov-box">
          <div class="gov-title">
            <p>全市负荷趋势图<i class="gl"></i><i class="gl"></i></p>
          </div>
          <chart :options="chart2" :theme="chartTheme" auto-resize></chart>
        </div>
        <div class="gov-box">
            <div class="gov-title">
              <p>全市一周用电量和负荷极值<i class="gl"></i><i class="gl"></i></p>
            </div>
            <chart :options="chart3" :theme="chartTheme" auto-resize></chart>
        </div>
      </div>
    </div> 
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'governmentMain',
  data () {

    return {
      chartTheme: {},
      chart1: {
        color: ['#0024e4','#9d4fff','#4bf7ff','#acfbff','#2ba0ff','#0b4dff'],
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          show: false,
        },  
        series : [
          {
            name:'用电负荷',
            type:'pie',
            radius : '70%',
            center: ['50%', '50%'],
            data:[
              {value:435, name:'海宁市统计局'},
              {value:310, name:'海宁市旅游局'},
              {value:274, name:'海宁市信访局'},
              {value:235, name:'海宁市环保局'},
              {value:200, name:'海宁市政法委员会'},
              {value:200, name:'海宁市人们政府办公室'}
            ].sort(function (a, b) { return a.value - b.value; }),
            label: {
              normal: {
                textStyle: {
                  color: '#fff'
                }
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: '#fff'
                },
                length: 10,
                length2: 60
              }
            },
            itemStyle: {
              normal: {
                shadowOffsetY: 4,               
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 166, .25)'
              }
            },
          }
        ]
      },
      chart2: {
        color: ['#0045de'],
        tooltip : {
          trigger: 'axis',
          axisPointer: {
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          show: false,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis : [
          {
            type : 'category',
            boundaryGap : false,
            data : ['1:00','1:05','1:10','1:15','1:20','1:25','1:30','1:35','1:40','1:45','1:50','1:55','2:00','2:05'],
          }
        ],
        yAxis : [
          {
            type : 'value',
          }
        ],
        series : [
          {
            name:'总负荷',
            type:'line',
            stack: '总量',
            smooth: true,
            data:[120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210],
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgb(0, 69, 222)'
                }, {
                  offset: 1,
                  color: 'rgb(0, 100, 222)'
                }])
              }
            },
          }
        ]
      },
      chart3: {
        color: ['#4bf7ff','#0b4dff'],
        tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        legend: {
          data: ['日用电量','当日最大负荷','当日最小负荷'],
          top: 20
        },
        xAxis : [
          {
            type : 'category',
            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis : [
          {
            name: '用电量（kWh）',
            type : 'value',
          },
          {
            name: '负荷（kW）',
            type : 'value',
            splitLine: {
              show: false
            }
          }
        ],
        series : [
          {
            name:'日用电量',
            type:'bar',
            barWidth: '20%',
            data:[10, 52, 200, 334, 390, 330, 220],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[
                  {offset: 0, color: '#994dff'},
                  {offset: 1, color: '#0020ed'}
                ]),
              }
            }
          },
          {
            name:'当日最大负荷',
            type:'line',
            data:[10, 52, 200, 334, 390, 330, 220],
            yAxisIndex: 1,
            smooth: false
          },
          {
            name:'当日最小负荷',
            type:'line',
            data:[10, 52, 200, 334, 390, 330, 220],
            yAxisIndex: 1,
            smooth: false
          }
        ]
      },
      monitor:{unitCount:{unitCount:'98'},currentLoad:{},elecConsumYesterday:{},waterConsumYesterday:{}},
      roomInfo: {}
    }
  },
  mounted: function () {
    this.$http('/vqdisplay/static/HospitalChartTheme.json')
    .then( response => {
      this.chartTheme = response.data
    })
    this.getData()
  },
  methods: {
    getData: function () {
      this.$http('/vqdisplay/jnmonitor/data')
      .then( response => {
        // console.log(response.data.body)
        let _data = response.data.body 
        this.monitor = _data.monitor
        this.roomInfo = _data.roomInfo
        this.chart1.series[0].data = _data.currentLoadPie.series

        this.chart2.xAxis[0].data = _data.elecLoadLine.xAxis
        this.chart2.series[0].data = _data.elecLoadLine.series[0]['总负荷']

        this.chart3.xAxis[0].data = _data.elecConsumThisWeekBar.xAxis
        this.chart3.series[0].data = _data.elecConsumThisWeekBar.series[2]['日能耗']
        this.chart3.series[1].data = _data.elecConsumThisWeekBar.series[0]['极大值']
        this.chart3.series[2].data = _data.elecConsumThisWeekBar.series[1]['极小值']
      })
    },
    selectImg: function(item) {
      if (item) {
        if (item.indexOf('-')>=0) {
          return '/vqdisplay/static/down.png'        
        } else {
          return '/vqdisplay/static/up.png'
        }
      } else {
        return '/vqdisplay/static/down.png'
      }
    }
  }
}
</script>

<style scoped>
  @import '../../../style/government.css';
  .echarts {
    height: 80%;
    width: 100%;
  }
</style>